<template>
<div class="page">
	<div class='nav'>
    <div class="input_view flex_ac">
      <div class="nav_title">消息</div>
      <div class="flex_ac flex_center sq_clear">
        <img src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/huarong/xcx/clear.png" mode=""/>
        清除未读
      </div>
    </div>
	</div>
	<div class="h50"></div>

	<div class="item_xx" @click="toSysList()">
		<div class="xt_left flex_ac flex_center">
			<img src="~@/assets/img/xxList/system.png" alt="">
			<div class="dian"></div>
		</div>
		<div class="xt_right">
			<div class="xt_title">系统推送</div>
			<div class="xt_desc">有一条新的系统信息推送，请您查看</div>
			<div class="xt_time">05-12</div>
		</div>
	</div>
	
	<van-swipe-cell v-for="(item,index) in list" :key='index'>
    <div class="item_xx" @click="toDetail(item)">
      <div class="xt_left">
        <img :src="item.avatar||'http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/dzmp_avatar.png'" mode=""/>
        <div class="dian_num" v-if="item.no_read_num">{{item.no_read_num}}</div>
      </div>
      <div class="xt_right">
        <div class="xt_title">{{item.nickname||'微信用户'}}</div>
        <div class="xt_desc">{{item.content}}</div>
        <div class="xt_time">{{item.create_time}}</div>
      </div>
    </div>
    <template #right>
      <div class="slot-button" @click="del(item.id,index)">
        <div class="del_div flex_ac flex_center">
          <img src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/del.png" mode=""/>
        </div>
      </div>
    </template>
	</van-swipe-cell>

	<div class="" style="height: 80px;width: 100%;"></div>
	<Tabbar :current="3"></Tabbar>
</div>
</template>

<script>
	import Tabbar from '@/components/Tabbar.vue'
  export default {
		components:{Tabbar},
		data() {
			return {
				options:[
					{
						text: '删除',
						style: {
								backgroundColor: '#EB7418'
						}
					}
				],
				page:1,
        list: [
          {nickname:'微信用户',content:'有一条新的系统信息推送，请您查看',create_time:'05-12',no_read_num:2},
          {nickname:'微信用户',content:'有一条新的系统信息推送，请您查看',create_time:'05-12',no_read_num:2},
          {nickname:'微信用户',content:'有一条新的系统信息推送，请您查看',create_time:'05-12',no_read_num:2},
        ],
				page:1,
			}
		},
		methods: {
			toDetail(item){
        this.$router.push({name:'chat_user',item})
			},
			getList(){
	
      },
      toSysList() {
        this.$router.push('xxDetail')
      },
			del(id,index){
        let that = this
        this.$dialog.confirm({
          title: '提示',
          message: '确定删除消息吗?',
        })
          .then(() => {
            this.$notify({ type:'success',message:'删除成功'});
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
			},
		},
	}
</script>

<style scoped lang="scss">
.page{
	height:100%;
	background:#f4f4f4;
}
.xx_l{
	width: calc(100% - 60px);
}
.btn_c{
	width: 50px;
	height: 28px;
	font-size: 14px;
	background-color: #ff9933;
	color: #fff;
	border-radius: 4px;
	line-height: 28px;
	text-align: center;
}
.item_xx{
	background:#fff;
	width: calc(100% - 24px);
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 85px;
	&:active{
		background-color: rgba($color: #000000, $alpha: .1);
	}
	.xt_left{
		// background: linear-gradient(-62deg, #138AF2, #54A3FF);
		height:48px;
		width:48px;
		border-radius: 24px;
		margin-right:11px;
		position: relative;
		.dian{
			top: 3px;
			right:3px;
			position: absolute;
			width:9px;
			height:9px;
			border-radius: 4.5px;
			background: #F44436;
		}
		.dian_num{
			top: 0px;
			right:-5px;
			position: absolute;
			width:18px;
			height:18px;
			border-radius: 9px;
			text-align: center;
			line-height: 18px;
			font-size: 10px;
			color: #FFFFFF;
			background: #F44436;
		}
		img{
			height:100%;
			width:100%;
			border-radius: 50%;
		}
	}
	.xt_right{
		width:calc(100% - 59px);
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		border-bottom: 1px solid #f0f0f0;
	}
}
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
  height: 40px;
	background-color: rgba($color: #fff, $alpha: 1);
	z-index: 10;
	transition: all 0.5s;
}
.input_view{
	width: 100%;
  height: 100%;
	.nav_title{
		font-weight: 500;
		font-size: 18px;
		color: #000;
		padding-left: 12px;
		margin-right: 10px;
	}
	.sq_clear{
		height: 22px;
		width: 80px;
		background: #F5F5F5;
		border-radius: 11px;
		font-size: 12px;
		color: #999999;
		img{
			width:11px;
			height:11px;
			margin-right: 2.5px;
		}
	}
}

	.xt_title{
		font-size: 16px;
		color: #000000;
	}
	.xt_desc{
		font-size: 14px;
		color: #666666;
		margin:6px 0;
	}
	.xt_time{
		font-size: 11px;
		color: #666666;
	}
	
	.slot-button{
		position: relative;
    height: 100%;
	}
	.del_div{
		position: relative;
		top:calc(50% - 20px);
		margin:auto 12px;
		width: 40px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 7px 10px 0px rgba(102,102,102,0.1);
		border-radius: 50%;
		img{
			height:19px;
			width:19px;
		}
	}
	
	.none_sj{
		text-align:center;
		padding-top:50px;
		.none_text{
			width:100%;
			font-weight: 400;
			font-size: 14px;
			color: #666666;
			margin-top:20px;
		}
		img{
			width:115px;
			height:60px;
		}
	}
</style>
